<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:c="http://java.sun.com/jsp/jstl/core"
	xmlns:p="http://primefaces.org/ui"
	template="/templates/userLayout.xhtml">

	<ui:define name="pageTitle">#{out.index_title}</ui:define>

	<ui:define name="head-extra">
		<!-- custom css -->

	</ui:define>

	<ui:define name="dialogs">
		<p:dialog header="Images" widgetVar="productImage" modal="true"
			dynamic="true" position="center" styleClass="autoWidthDialog"
			resizable="false">
			<p:panelGrid columns="3" style="width:100%;">
				<p:commandButton value="Prev" style="width:100%; height: 100%;"
					action="#{categoryProductController.stepImage(false)}"
					update=":productImageBox" />
				<p:commandButton value="Close" style="width:100%; height: 100%;"
					onmouseup="PF('productImage').hide();" />
				<p:commandButton value="Next" style="width:100%; height: 100%;"
					action="#{categoryProductController.stepImage(true)}"
					update=":productImageBox" />
			</p:panelGrid>
			<h:form id="productImageBox">
				<div style="width: 100%; height: 100%;">
					<p:graphicImage value="#{imageBean.image}" styleClass="showIMG">
						<f:param name="id"
							value="#{categoryProductController.selectedImage.imageDataId}" />
					</p:graphicImage>
				</div>
			</h:form>
		</p:dialog>
	</ui:define>

	<ui:define name="content">
		<h1>Products</h1>

		<h:form id="currentProduct"
			style="margin-top: 10px; margin-bottom:10px; ">
			<p:panelGrid
				rendered="#{categoryProductController.selectedProduct!=null}">
				<f:facet name="header">
					<p:commandButton value="close"
						action="#{categoryProductController.closeProduct()}"
						update=":currentProduct" />
				</f:facet>
				<div class="ui-grid ui-grid-responsive productRow">
					<div class="ui-grid-row" style="width: 98%;">
						<div class="ui-grid-col-6">
							<p:fieldset legend="Details" styleClass="productBox">
								<h:outputText value="Name: " />
								<h:outputText
									value="#{categoryProductController.selectedProduct.name}"
									style="font-weight: bold" />
								<br />
								<h:outputText value="Price: " />
								<h:outputText
									styleClass="#{categoryProductController.selectedProduct.isSpecial?'dottedText':''}"
									value="#{categoryProductController.selectedProduct.price}"
									style="font-weight: bold" />
								<br />
								<h:outputText value="Special Price: "
									rendered="#{categoryProductController.selectedProduct.isSpecial}" />
								<h:outputText
									rendered="#{categoryProductController.selectedProduct.isSpecial}"
									value="#{categoryProductController.selectedProduct.specialPrice}"
									style="font-weight: bold" />
								<br />
								<h:outputText value="Text:" />
								<h:outputText escape="false"
									value="#{categoryProductController.selectedProduct.text}"
									style="font-weight: bold" />
							</p:fieldset>
						</div>
						<div class="ui-grid-col-6">
							<p:fieldset
								legend="Images (#{categoryProductController.selectedProduct.images.size()})"
								styleClass="productBox">
								<ui:repeat
									value="#{categoryProductController.selectedProduct.images}"
									var="image">
									<p:commandLink
										action="#{categoryProductController.initImageView(image)}"
										update=":productImageBox"
										onmouseup="PF('productImage').show();">
										<p:graphicImage value="#{imageBean.image}"
											styleClass="productIMG"
											alt="#{categoryProductController.selectedProduct.name} : #{image.fileName}"
											title="#{categoryProductController.selectedProduct.name}">
											<f:param name="id" value="#{image.imageDataId}" />
										</p:graphicImage>
									</p:commandLink>
								</ui:repeat>

								<p:graphicImage name="/images/no_image.jpg"
									style="height: auto; width: 100%; max-height:100px;"
									visible="#{categoryProductController.selectedProduct.images.size() == 0}"
									rendered="#{categoryProductController.selectedProduct.images.size() == 0}">
								</p:graphicImage>
							</p:fieldset>
						</div>
					</div>
					<div class="ui-grid-col-6">
						<p:fieldset legend="Add to cart" styleClass="productBox">
							<p:fragment autoUpdate="true">
								<h:outputText value="Quantity" />
								<p:inputText id="quantity" value="#{cartController.quantity}">
								</p:inputText>
								<p:commandButton value="ADD"
									action="#{cartController.addElementToCart(categoryProductController.selectedProduct)}"
									update=":cart" />
							</p:fragment>
						</p:fieldset>
					</div>
				</div>
				<br />
				<p:separator style="height:5px;" />
				<br />
			</p:panelGrid>

		</h:form>

		<h:form id="productList" style="margin-top: 10px; margin-bottom:10px; background-color: antiquewhite;">
			<h:form
				rendered="#{categoryProductController.productModel.currentCategory!=null}">
				<p:commandButton value="close"
					action="#{categoryProductController.closeProductList()}"
					update=":productList :currentProduct" />
				<br />
				<p:dataScroller
					value="#{categoryProductController.productModel.visibleProductList}"
					var="product">
					<f:facet name="header">
			            Category: <h:outputText
							value="#{categoryProductController.productModel.currentCategory.name}" />
					</f:facet>
					<p:panelGrid style="width:100%;">
						<p:row style="width:100%;">
							<p:column style="width:30%">
								<p:graphicImage value="#{imageBean.image}"
									style="height: auto; width: 100%;"
									visible="#{product.images.size() > 0}"
									rendered="#{product.images.size() > 0}">
									<f:param name="id"
										value="#{product.images.get(0).thumbnailDataId}" />
								</p:graphicImage>
								<p:graphicImage name="/images/no_image.jpg"
									style="height: auto; width: 100%; max-height:100px;"
									visible="#{product.images.size() == 0}"
									rendered="#{product.images.size() == 0}">
								</p:graphicImage>
							</p:column>
							<p:column style="width:70%">
								<h:panelGrid columns="2" cellpadding="5" style="height: 100%;">
									<h:outputText value="Name:" />
									<h:outputText value="#{product.name}" style="font-weight: bold" />
									<h:outputText value="Price:" />
									<h:outputText
										value="#{product.isSpecial?product.specialPrice:product.price}"
										style="font-weight: bold" />
									<h:outputText value="Text:" />
									<h:outputText value="#{product.shortText}"
										style="font-weight: bold" />
									<p:commandButton value="Show Datails"
										action="#{categoryProductController.showProduct(product)}"
										update=":currentProduct" />
								</h:panelGrid>
							</p:column>
						</p:row>
					</p:panelGrid>
				</p:dataScroller>
				<p:commandButton value="More"
					rendered="#{categoryProductController.productModel.visibleProductList.size() lt categoryProductController.productModel.rowNumber}"
					action="#{categoryProductController.productModel.loadMore()}"
					update=":productList" />
				<br />
				<p:separator style="height:5px;" />
				<br />
			</h:form>
		</h:form>
		<br />
		<br />
		<h:form id="categoryList" style="background-color: bisque;">
			<p:commandButton value="Back"
				rendered="#{categoryProductController.beforeCategorys.size()>0}"
				action="#{categoryProductController.backCategory()}"
				update=":categoryList" />
			<p:dataGrid id="category" var="category"
				value="#{categoryProductController.visibleCategory}" columns="3"
				layout="grid" rows="12" paginator="true"
				paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
				rowsPerPageTemplate="6,12,16">
				<f:facet name="header">
					<h:outputText value="Categorys"
						rendered="#{categoryProductController.parentCategory==null}" />
					<h:outputText
						value="#{categoryProductController.parentCategory.name}"
						rendered="#{categoryProductController.parentCategory!=null}" />
				</f:facet>
				<p:panel header="#{category.name}" style="text-align:center; background-color: antiquewhite;">
					<h:panelGrid columns="1" style="width:100%">
						<!-- Image -->
						<p:graphicImage value="#{imageBean.image}"
							style="height: 150px; width: 200px;"
							rendered="#{category.image!=null}">
							<f:param name="id" value="#{category.image.thumbnailDataId}" />
						</p:graphicImage>
						<p:graphicImage name="/images/no_image.jpg"
							style="height: 150px; width: 200px;"
							rendered="#{category.image==null}">
						</p:graphicImage>
						<!-- Image -->
						<h:panelGrid columns="2" style="width:100%">
							<p:commandButton value="Sub category (#{category.childNumber})"
								disabled="#{category.childNumber==0}"
								action="#{categoryProductController.renderVisibleList(category, false)}"
								update=":categoryList" />
							<p:commandButton value="Products (#{category.productNumber})"
								disabled="#{category.productNumber==0}"
								action="#{categoryProductController.productModel.initProductList(category)}"
								update=":productList" />
						</h:panelGrid>
					</h:panelGrid>
				</p:panel>
			</p:dataGrid>
		</h:form>

	</ui:define>
</ui:composition>